<template>
  <div class="state">
    <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="back"> </van-nav-bar>
    <van-tabs sticky swipeable @change="change" v-model="active">
      <van-tab title="全部">
        <van-card v-for="(item, i) of orderList" :key="i" :price="item.sum" :title="item.title" :thumb="item.main_img" @click="jump(item.oid)">
          <template #tags>
            <div>出发时间 : {{ item.start_time }}</div>
          </template>
          <template #num>
            <div>人数 x {{ item.people }}</div>
          </template>
          <template #footer>
            <div>订单状态 : {{ item.statu | order }}</div>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="已预约">
        <van-card v-for="(item, i) of statuList" :key="i" :price="item.sum" :title="item.title" :thumb="item.main_img" @click="jump(item.oid)">
          <template #tags>
            <div>出发时间 : {{ item.start_time }}</div>
          </template>
          <template #num>
            <div>人数 x {{ item.people }}</div>
          </template>
          <template #footer>
            <div>订单状态 : {{ item.statu | order }}</div>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="已确认">
        <van-card v-for="(item, i) of statuList" :key="i" :price="item.sum" :title="item.title" :thumb="item.main_img" @click="jump(item.oid)">
          <template #tags>
            <div>出发时间 : {{ item.start_time }}</div>
          </template>
          <template #num>
            <div>人数 x {{ item.people }}</div>
          </template>
          <template #footer>
            <div>订单状态 : {{ item.statu | order }}</div>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="已出行">
        <van-card v-for="(item, i) of statuList" :key="i" :price="item.sum" :title="item.title" :thumb="item.main_img" @click="jump(item.oid)">
          <template #tags>
            <div>出发时间 : {{ item.start_time }}</div>
          </template>
          <template #num>
            <div>人数 x {{ item.people }}</div>
          </template>
          <template #footer>
            <div>订单状态 : {{ item.statu | order }}</div>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="已完成">
        <van-card v-for="(item, i) of statuList" :key="i" :price="item.sum" :title="item.title" :thumb="item.main_img" @click="jump(item.oid)">
          <template #tags>
            <div>出发时间 : {{ item.start_time }}</div>
          </template>
          <template #num>
            <div>人数 x {{ item.people }}</div>
          </template>
          <template #footer>
            <div>订单状态 : {{ item.statu | order }}</div>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="已取消">
        <van-card v-for="(item, i) of statuList" :key="i" :price="item.sum" :title="item.title" :thumb="item.main_img" @click="jump(item.oid)">
          <template #tags>
            <div>出发时间 : {{ item.start_time }}</div>
          </template>
          <template #num>
            <div>人数 x {{ item.people }}</div>
          </template>
          <template #footer>
            <div>订单状态 : {{ item.statu | order }}</div>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getOrder } from '../server/user.js';
export default {
  data() {
    return {
      active: 0,
      token: localStorage.getItem('token'), //token
      orderList: [],
      statuList: [],
    };
  },
  mounted() {
    this.getOrder();
  },
  methods: {
    back() {
      this.$router.back();
    },
    // 获取用户订单
    getOrder() {
      // 调用封装的getOrder
      getOrder(this.token)
        .then((result) => {
          for (var i = 0; i < result.length; i++) {
            // 将数据库返回的时间处理为人看的时间
            result[i].start_time = this.moment(result[i].start_time).format('YYYY-MM-DD');
          }
          this.orderList = result;
          this.orderList.reverse();
        })
        .catch(() => {
          this.$toast.fail('暂无订单');
        });
    },
    // 切换订单状态
    change(active) {
      if (active != 0) {
        this.statuList = [];
        for (var item of this.orderList) {
          if (item.statu == active) {
            this.statuList.push(item);
          }
        }
        if (this.statuList.length == 0) {
          this.$toast.fail('暂无订单');
        }
      }
    },
    jump(oid) {
      this.$router.push(`/orderDetail/${oid}`);
    },
  },
  // 过滤器
  filters: {
    //订单状态过滤器
    order(oldVal) {
      switch (oldVal) {
        case 1:
          return '已预约';
        case 2:
          return '已确认';
        case 3:
          return '已出行';
        case 4:
          return '已完成';
        case 5:
          return '已取消';
      }
    },
  },
};
</script>
<style lang="scss">
.state {
  .van-nav-bar__text {
    font-size: 14px;
    color: #000;
  }
  .van-icon-arrow-left {
    color: #000;
  }
}
</style>
